<!--<template>-->
<!--  <div class="app-container">-->
<!--      <el-row :gutter="20">-->
<!--        <el-col :span="12" :xs="24">-->
<!--          <div ref="main" style="width: 100%; height: 400px"></div>-->
<!--        </el-col>-->
<!--        <el-col :span="12" :xs="24">-->
<!--          <div ref="main2" style="width: 100%; height: 400px"></div>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row :gutter="20" style="margin-top: 20px;">-->
<!--        <el-col :span="24" :xs="24">-->
<!--          <div ref="main3" style="width: 100%; height: 400px"></div>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--  </div>-->
<!--    -->
<!--</template>-->
<!--<script lang="js" setup>-->
<!--import { ref, onMounted } from "vue";-->
<!--import {listOrganization,activityList,activityType} from "@/api/system/echarts";-->
<!--import * as echarts from "echarts";-->
<!--const main = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value-->
<!--const main2 = ref(); -->
<!--const main3 = ref();-->
<!--onMounted(() => {-->
<!--  // getOranization();-->
<!--  // getActivityType();-->
<!--  // getActivityList();-->
<!--});-->
<!--// function getOranization() {-->
<!--//-->
<!--//   listOrganization().then(response => {-->
<!--//   const schoolData = response.data;-->
<!--//     // 基于准备好的dom，初始化echarts实例-->
<!--//   const myChart = echarts.init(main.value);-->
<!--//   // 指定图表的配置项和数据-->
<!--//   const option = {-->
<!--//     title: {-->
<!--//       text: '志愿组织',-->
<!--//       left: 'center'-->
<!--//     },-->
<!--//     tooltip: {-->
<!--//       trigger: 'item',-->
<!--//       formatter: '<br/>{b} : {c} ({d}%)'-->
<!--//     },-->
<!--//     legend: {-->
<!--//       orient: 'vertical',-->
<!--//       left: 'left',-->
<!--//       data: []-->
<!--//     },-->
<!--//     series: [-->
<!--//       {-->
<!--//         type: 'pie',-->
<!--//         radius: '55%',-->
<!--//         center: ['50%', '60%'],-->
<!--//         data: [{ value: 335, name: '' }]-->
<!--//       }-->
<!--//     ]-->
<!--//   };-->
<!--// // 赋值-->
<!--//   option.series = [-->
<!--//   {-->
<!--//     type: 'pie',-->
<!--//     radius: '55%',-->
<!--//     center: ['50%', '60%'],-->
<!--//     // data: res.data.map((v) => {-->
<!--//     //   return { name: v.name, value: v.value }-->
<!--//     // })-->
<!--//     data: schoolData,-->
<!--//   }-->
<!--// ]-->
<!--// // 赋值-->
<!--// // option.legend = [-->
<!--// //   {-->
<!--// //    data: schoolData.map((a) => a.name)-->
<!--// //   }-->
<!--// // ]-->
<!--// // 赋值-->
<!--// option.legend.data = schoolData.map((a) => a.name)-->
<!--//-->
<!--//   // 使用刚指定的配置项和数据显示图表。-->
<!--//   myChart.setOption(option);-->
<!--//   });-->
<!--// }-->

<!--// function getActivityType() {-->
<!--//-->
<!--//   activityType().then(response => {-->
<!--//   const schoolData = response.data;-->
<!--//   // 基于准备好的dom，初始化echarts实例-->
<!--//   const myChart = echarts.init(main2.value);-->
<!--//   // 指定图表的配置项和数据-->
<!--//   const option = {-->
<!--//     title: {-->
<!--//       text: '活动类型',-->
<!--//       left: 'center'-->
<!--//     },-->
<!--//     tooltip: {-->
<!--//       trigger: 'item',-->
<!--//       formatter: '<br/>{b} : {c} ({d}%)'-->
<!--//     },-->
<!--//     legend: {-->
<!--//       orient: 'vertical',-->
<!--//       left: 'left',-->
<!--//       data: []-->
<!--//     },-->
<!--//     series: [-->
<!--//       {-->
<!--//         type: 'pie',-->
<!--//         radius: '55%',-->
<!--//         center: ['50%', '60%'],-->
<!--//         data: [{ value: 335, name: '' }]-->
<!--//       }-->
<!--//     ]-->
<!--//   };-->
<!--// // 赋值-->
<!--//   option.series = [-->
<!--//   {-->
<!--//     type: 'pie',-->
<!--//     radius: '55%',-->
<!--//     center: ['50%', '60%'],-->
<!--//     // data: res.data.map((v) => {-->
<!--//     //   return { name: v.name, value: v.value }-->
<!--//     // })-->
<!--//     data: schoolData,-->
<!--//   }-->
<!--// ]-->
<!--// // 赋值-->
<!--// // option.legend = [-->
<!--// //   {-->
<!--// //    data: schoolData.map((a) => a.name)-->
<!--// //   }-->
<!--// // ]-->
<!--// // 赋值-->
<!--// option.legend.data = schoolData.map((a) => a.name)-->
<!--//-->
<!--//   // 使用刚指定的配置项和数据显示图表。-->
<!--//   myChart.setOption(option);-->
<!--// });-->
<!--// }-->

<!--// function getActivityList() {-->
<!--//   activityList().then(response => {-->
<!--//     let dataNames = [];-->
<!--//     let dataValues= [];-->
<!--//    for(let i = 0;i< response.data.length;i++){-->
<!--//       dataNames[i] = response.data[i].name;-->
<!--//       dataValues[i] =  response.data[i].attendPeopleCount;-->
<!--//    }-->
<!--//     // 基于准备好的dom，初始化echarts实例-->
<!--//     const myChart = echarts.init(main3.value);-->
<!--//   const option = {-->
<!--//     title: {-->
<!--//       text: '活动人数分布',-->
<!--//       left: 'center'-->
<!--//     },-->
<!--//     color: ['#3398DB'],-->
<!--//     tooltip: {-->
<!--//         trigger: 'axis',-->
<!--//         axisPointer: {            // 坐标轴指示器，坐标轴触发有效-->
<!--//             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'-->
<!--//         }-->
<!--//     },-->
<!--//     grid: {-->
<!--//         left: '3%',-->
<!--//         right: '4%',-->
<!--//         bottom: '3%',-->
<!--//         containLabel: true-->
<!--//     },-->
<!--//     xAxis: [-->
<!--//         {-->
<!--//             type: 'category',-->
<!--//             data: dataNames,-->
<!--//             axisTick: {-->
<!--//                 alignWithLabel: true-->
<!--//             }-->
<!--//         }-->
<!--//     ],-->
<!--//     yAxis: [-->
<!--//         {-->
<!--//             type: 'value'-->
<!--//         }-->
<!--//     ],-->
<!--//     series: [-->
<!--//         {-->
<!--//             name: '直接访问',-->
<!--//             type: 'bar',-->
<!--//             barWidth: '60%',-->
<!--//             data: dataValues-->
<!--//         }-->
<!--//     ]-->
<!--// };-->
<!--//   // 使用刚指定的配置项和数据显示图表。-->
<!--//   myChart.setOption(option);-->
<!--//   });-->
<!--// }-->
<!--</script>-->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <div class="chart-title">饼状图示例</div>
        <div ref="pieChart" style="width: 100%; height: 400px"></div>
      </el-col>
      <el-col :span="12" :xs="24">
        <div class="chart-title">柱状图示例</div>
        <div ref="barChart" style="width: 100%; height: 400px"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24" :xs="24">
        <div class="chart-title">折线图示例</div>
        <div ref="lineChart" style="width: 100%; height: 400px"></div>
      </el-col>
    </el-row>
  </div>

</template>
<script lang="js" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

// 图表DOM引用
const pieChart = ref();
const barChart = ref();
const lineChart = ref();

onMounted(() => {
  renderPieChart();
  renderBarChart();
  renderLineChart();

  // 响应式处理
  window.addEventListener('resize', () => {
    const pieChartInstance = echarts.getInstanceByDom(pieChart.value);
    const barChartInstance = echarts.getInstanceByDom(barChart.value);
    const lineChartInstance = echarts.getInstanceByDom(lineChart.value);

    if (pieChartInstance) pieChartInstance.resize();
    if (barChartInstance) barChartInstance.resize();
    if (lineChartInstance) lineChartInstance.resize();
  });
});

// 渲染饼状图
function renderPieChart() {
  // 模拟数据 - 各学院学生人数分布
  const pieData = [
    { value: 1048, name: '计算机学院' },
    { value: 735, name: '机械工程学院' },
    { value: 580, name: '电子信息学院' },
    { value: 484, name: '经济管理学院' },
    { value: 300, name: '外国语学院' }
  ];

  // 初始化图表
  const myChart = echarts.init(pieChart.value);

  // 配置项
  const option = {
    title: {
      text: '各学院学生人数分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: pieData.map(item => item.name)
    },
    series: [
      {
        name: '学生人数',
        type: 'pie',
        radius: ['40%', '70%'], // 环形图
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {c}人'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        data: pieData
      }
    ]
  };

  // 使用配置项设置图表
  myChart.setOption(option);
}

// 渲染柱状图
function renderBarChart() {
  // 模拟数据 - 近五年志愿活动参与人次
  const years = ['2019年', '2020年', '2021年', '2022年', '2023年'];
  const data = [120, 200, 150, 280, 370];

  // 初始化图表
  const myChart = echarts.init(barChart.value);

  // 配置项
  const option = {
    title: {
      text: '近五年志愿活动参与人次',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b}: {c}人次'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: years,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '参与人次',
        nameTextStyle: {
          padding: [0, 0, 0, 40]
        }
      }
    ],
    series: [
      {
        name: '参与人次',
        type: 'bar',
        barWidth: '60%',
        data: data,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        }
      }
    ]
  };

  // 使用配置项设置图表
  myChart.setOption(option);
}

// 渲染折线图
function renderLineChart() {
  // 模拟数据 - 各月份志愿活动数量和参与人数
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  const activityCounts = [2, 4, 7, 10, 12, 8, 5, 3, 9, 11, 13, 7];
  const participantCounts = [50, 120, 180, 240, 300, 250, 150, 80, 220, 280, 350, 200];

  // 初始化图表
  const myChart = echarts.init(lineChart.value);

  // 配置项
  const option = {
    title: {
      text: '2023年各月份志愿活动统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['活动数量', '参与人数'],
      top: '30px'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: months
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '活动数量',
        position: 'left',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#5470C6'
          }
        },
        axisLabel: {
          formatter: '{value}个'
        }
      },
      {
        type: 'value',
        name: '参与人数',
        position: 'right',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#91CC75'
          }
        },
        axisLabel: {
          formatter: '{value}人'
        }
      }
    ],
    series: [
      {
        name: '活动数量',
        type: 'line',
        smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: activityCounts,
        itemStyle: {
          color: '#5470C6'
        }
      },
      {
        name: '参与人数',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        emphasis: {
          focus: 'series'
        },
        data: participantCounts,
        itemStyle: {
          color: '#91CC75'
        },
        areaStyle: {
          opacity: 0.2
        }
      }
    ]
  };

  // 使用配置项设置图表
  myChart.setOption(option);
}
</script>

<style scoped>
.app-container {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
}

.el-row {
  margin-bottom: 20px;
}

.el-col > div {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
  text-align: center;
}
</style>